<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- bootstrap5 -->
  <link rel="stylesheet" href="../public/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
  <script src="../public/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script>
  <!-- wow -->
  <link rel="stylesheet" href="../public/wow/animatePlus.css">
  <script type="text/javascript" src="../public/wow/wow.min.js"></script>
    <script type="text/javascript">
      new WOW().init();
    </script>
  <!-- less4 -->
  <link rel="stylesheet/less" href="./less/index.less">
  <script src="../public/less/less.js"></script>
  <script src="./js/index.js"></script>
  <title>SPIRIT8</title>
</head>
<body>
  <header data-bs-theme="dark" class="w-100 overflow-hidden">
    <div class="container pt-3 position-relative">
      <div class="row">
        <nav class="navbar navbar-expand-lg bg-transparent" id="navigate">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">SPIRIT8</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item underline">
                  <a class="nav-link active" aria-current="page" href="#">HOME</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#aboutUs">ABOUT</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#services">SERVICES</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#work">PORITFOLIO</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#testimonials">TESTIMONIALS</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#contactUs">CONTACT</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
      <div class="row justify-content-center">
        <div class="col-8 position-relative">
          <div class="mx-auto mt-lg-5 mt-xl-0 wow animate__rotateIn w-75 d-none d-sm-block" data-wow-duration="5s">
            <img src="./img/rotatingMeteor.png" alt="" class="w-100">
          </div>
          <div class="position-absolute w-100 text-center text-light mt-5 pt-5 mt-sm-0 pt-sm-0 mt-lg-5 mt-xl-3" id="text2">
            <p class="fs-2 wow animate__zoomInDown" data-wow-duration="4s">WELCOME ON <span class="colorfcac45">SPIRIT8</span></p>
            <p class="text-body-tertiary wow animate__zoomIn" data-wow-delay="2.5s" data-wow-duration="3s">We are a digital agency with years of experience and with extraordinary people</p>
          </div>
        </div>
      </div>
      <div class="row justify-content-center mt-xl-5" id="arrow">
        <div class="col-2 col-lg-1">
          <img src="./img/arrow.png" alt="" class="w-100">
        </div>
      </div>
    </div>
  </header>
  <div id="aboutUs" class="w-100 py-5">
    <div class="container">
      <div class="row">
        <div class="col-12 col-lg-6 wow animate__fadeInBottomRight" data-wow-offset="200">
          <img src="./img/tvsmall.png" alt="" class="w-100 d-lg-none">
          <img src="./img/tvbig.png" alt="" class="w-100 d-none d-lg-block">
        </div>
        <div class="col-12 col-lg-6 wow animate__fadeInRight" data-wow-offset="200" data-wow-delay="0.5s">
          <p class="fs14 mt-5 mt-lg-0">ABOUT US</p>
          <p class="fs-2 lh-lg"><span class="underline pb-2">SOME</span> WORDS <span class="fw-bold">ABOUT US</span></p>
          <p class="text-secondary fs14">We love building and rebuilding brands through our  specific skills. Using colour, fonts, and illustration, we brand companies in a way they will never forget.</p>
          <p class="text-secondary"><span class="text-dark fw-bold">⊙ Mission -</span> We deliver uniqueness and quality</p>
          <p class="text-secondary"><span class="text-dark fw-bold">⊙ Skills -</span> Delivering fast and excellent results</p>
          <p class="text-secondary"><span class="text-dark fw-bold">⊙ Clients -</span> Satisfied clients thanks to our experience</p>
          <div class="row">
            <div class="col-12 col-sm-8 col-md-6">
              <button type="button" class="btn btn-outline-dark rounded-0 w-100 fs12 ps-4 lh-lg" id="browse">BROWSE OUR WORK</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="team" class="w-100 py-5 bg-dark text-light text-center">
    <div class="container">
      <p class="fs-3 fw-light mb-1">MEET <span class="fw-bold">OUR TEAM</span></p>
      <div class="row justify-content-center">
        <div class="col-4 col-sm-3 col-md-2 col-lg-1">
          <div class="underline"></div>
        </div>
      </div>
      <div class="row justify-content-center mt-2 mb-4 mb-md-5">
        <div class="col-8">
          <div class="row justify-content-center">
            <div class="col-4 col-sm-3 col-md-2 col-lg-1">
              <div class="underline2"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="row g-4 g-md-5 g-lg-3 g-xl-5 my-lg-5">
        <div class="col-12 col-md-6 col-lg-3 wow animate__zoomInLeft" data-wow-offset="400">
          <div class="row justify-content-center">
            <div class="col-8 col-sm-5">
              <div class=""><img src="./img/foreigner1.png" alt="" class="w-100 rounded-circle"></div>
            </div>
            <div class="col-12 mt-3 mb-2 fw-bold">Jason Statham</div>
            <div class="col-12 fs12">Knife designer</div>
            <div class="col-12 fs12 mt-3">Do not seek to change what has come before. Seek to create that which has not.</div>
          </div>
        </div>
        
        <div class="col-12 col-md-6 col-lg-3 wow animate__zoomInUp" data-wow-offset="400">
          <div class="row justify-content-center">
            <div class="col-8 col-sm-5">
              <div class=""><img src="./img/foreigner2.png" alt="" class="w-100 rounded-circle"></div>
            </div>
            <div class="col-12 mt-3 mb-2 fw-bold">Van Damme</div>
            <div class="col-12 fs12">No English</div>
            <div class="col-12 fs12 mt-3">Do not seek to change what has come before. Seek to create that which has not.</div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3 wow animate__zoomInDown" data-wow-offset="400">
          <div class="row justify-content-center">
            <div class="col-8 col-sm-5">
              <div class=""><img src="./img/foreigner3.png" alt="" class="w-100 rounded-circle"></div>
            </div>
            <div class="col-12 mt-3 mb-2 fw-bold">Sylvester Stallone</div>
            <div class="col-12 fs12">Cigar Lover</div>
            <div class="col-12 fs12 mt-3">Do not seek to change what has come before. Seek to create that which has not.</div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3 wow animate__zoomInRight" data-wow-offset="400">
          <div class="row justify-content-center">  
            <div class="col-8 col-sm-5">
              <div class=""><img src="./img/foreigner4.png" alt="" class="w-100 rounded-circle"></div>
            </div>
            <div class="col-12 mt-3 mb-2 fw-bold">Jet Li</div>
            <div class="col-12 fs12">I need more money</div>
            <div class="col-12 fs12 mt-3">Do not seek to change what has come before. Seek to create that which has not.</div>
          </div>
        </div>
      </div>
      <div class="d-flex pt-5 justify-content-center">
        <img src="./img/carouselbtn.png" alt="" class="mx-1">
        <img src="./img/carouselbtn2.png" alt="" class="mx-1">
        <img src="./img/carouselbtn2.png" alt="" class="mx-1">
      </div>
    </div>
  </div>
  <div id="services" class="w-100 py-5 text-dark text-center">
    <div class="container">
      <p class="fs-3 fw-light mb-1">TAKE A LOOK AT <span class="fw-bold">OUR SERVICES</span></p>
      <div class="row justify-content-center">
        <div class="col-4 col-sm-3 col-md-2 col-lg-1">
          <div class="underline"></div>
        </div>
      </div>
      <div class="row justify-content-center mt-2 mb-4 mb-md-5">
        <div class="col-8">
          <div class="row justify-content-center">
            <div class="col-4 col-sm-3 col-md-2 col-lg-1">
              <div class="underline2"></div>
            </div>
          </div>
        </div>
      </div>
      <P class="fs14">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</P>
      <div class="row g-4 g-md-5 g-lg-3 g-xl-5 my-lg-5">
        <div class="col-12 col-md-6 col-lg-3 wow animate__slideInLeft" data-wow-offset="400">
          <div class="row justify-content-center">
            <div class="col-8 col-sm-5">
              <div class=""><img src="./img/icon1.png" alt="" class="w-100 rounded-circle"></div>
            </div>
            <div class="col-12 mt-3 mb-2 fw-bold">WEB DESIGN</div>
            <div class="col-12 fs12 mt-3">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
          </div>
        </div>
        
        <div class="col-12 col-md-6 col-lg-3 wow animate__slideInUp" data-wow-offset="400">
          <div class="row justify-content-center">
            <div class="col-8 col-sm-5">
              <div class=""><img src="./img/icon2.png" alt="" class="w-100 rounded-circle"></div>
            </div>
            <div class="col-12 mt-3 mb-2 fw-bold">MOBILE APPS</div>
            <div class="col-12 fs12 mt-3">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3 wow animate__slideInDown" data-wow-offset="400">
          <div class="row justify-content-center">
            <div class="col-8 col-sm-5">
              <div class=""><img src="./img/icon3.png" alt="" class="w-100 rounded-circle"></div>
            </div>
            <div class="col-12 mt-3 mb-2 fw-bold">PHOTOGRAPHY</div>
            <div class="col-12 fs12 mt-3">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3 wow animate__slideInRight" data-wow-offset="400">
          <div class="row justify-content-center">  
            <div class="col-8 col-sm-5">
              <div class=""><img src="./img/icon4.png" alt="" class="w-100 rounded-circle"></div>
            </div>
            <div class="col-12 mt-3 mb-2 fw-bold">MARKETING</div>
            <div class="col-12 fs12">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="clients" class="w-100 py-5 bg-dark text-light text-center overflow-hidden">
    <div class="container">
      <p class="fs-3 fw-light mb-1">SOME OF <span class="fw-bold">OUR CLIENTS</span></p>
      <div class="row justify-content-center">
        <div class="col-4 col-sm-3 col-md-2 col-lg-1">
          <div class="underline"></div>
        </div>
      </div>
      <div class="row justify-content-center mt-2 mb-4 mb-sm-5">
        <div class="col-8">
          <div class="row justify-content-center">
            <div class="col-4 col-sm-3 col-md-2 col-lg-1">
              <div class="underline2"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="row gx-5 gy-3 gy-sm-4 g-lg-3 g-xl-5 my-lg-5">
        <div class="col-3 d-sm-none d-lg-block col-lg-1"></div>
        <div class="col-6 col-md-4 col-lg-2"><img src="./img/chanel.png" alt="" class="w-100"></div>
        <div class="col-3 d-sm-none"></div>

        <div class="col-3 d-sm-none"></div>
        <div class="col-6 col-md-4 col-lg-2"><img src="./img/zara.png" alt="" class="w-100"></div>
        <div class="col-3 d-sm-none"></div>

        <div class="col-3 d-sm-none"></div>
        <div class="col-6 col-md-4 col-lg-2"><img src="./img/guerlain.png" alt="" class="w-100"></div>
        <div class="col-3 d-sm-none"></div>

        <div class="col-3 d-sm-none"></div>
        <div class="col-6 col-md-4 col-lg-2"><img src="./img/lancome.png" alt="" class="w-100"></div>
        <div class="col-3 d-sm-none"></div>

        <div class="col-3 d-sm-none"></div>
        <div class="col-6 col-md-4 col-lg-2"><img src="./img/lacoste.png" alt="" class="w-100"></div>
        <div class="col-3 d-sm-none d-lg-block col-lg-1"></div>
      </div>
      <div class="d-flex pt-5 justify-content-center">
        <img src="./img/carouselbtn.png" alt="" class="mx-1">
        <img src="./img/carouselbtn2.png" alt="" class="mx-1">
        <img src="./img/carouselbtn2.png" alt="" class="mx-1">
      </div>
    </div>
  </div>
  <div id="work" class="w-100 py-5 text-dark text-center">
    <div class="container">
      <p class="fs-3 fw-light mb-1">TAKE A LOOK AT <span class="fw-bold">OUR WORK</span></p>
      <div class="row justify-content-center">
        <div class="col-4 col-sm-3 col-md-2 col-lg-1">
          <div class="underline"></div>
        </div>
      </div>
      <div class="row justify-content-center mt-2 mb-4 mb-md-5">
        <div class="col-8">
          <div class="row justify-content-center">
            <div class="col-4 col-sm-3 col-md-2 col-lg-1">
              <div class="underline2"></div>
            </div>
          </div>
        </div>
      </div>
      <P class="fs14">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</P>
      <div class="row my-3">
        <nav class="navbar navbar-expand-lg bg-transparent">
          <div class="container-fluid">
            <a class="navbar-brand fs14 fw-bold" href="#">FILTER BY TYPE</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent2">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0 fs14">
                <li class="nav-item fw-bold">
                  <a class="nav-link active" aria-current="page" href="#">All</a>
                </li>
                <li class="nav-item d-none d-lg-block"><span class="nav-link px-0">|</span></li>
                <li class="nav-item">
                  <a class="nav-link" href="">ABOUT</a>
                </li>
                <li class="nav-item d-none d-lg-block"><span class="nav-link px-0">|</span></li>
                <li class="nav-item">
                  <a class="nav-link" href="">Web design</a>
                </li>
                <li class="nav-item d-none d-lg-block"><span class="nav-link px-0">|</span></li>
                <li class="nav-item">
                  <a class="nav-link" href="">Mobile design</a>
                </li>
                <li class="nav-item d-none d-lg-block"><span class="nav-link px-0">|</span></li>
                <li class="nav-item">
                  <a class="nav-link" href="">Photograpy</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
      <div class="row g-4 g-lg-3">
        <div class="col-12 col-sm-6 col-lg-3 wow animate__rotateInDownLeft" data-wow-offset="400">
          <div class="hover1 position-relative cursorPointer">
            <img src="./img/trendan.png" alt="" class="w-100">
            <div class="w-100 h-100 position-absolute top-0 text-light d-none">
              <p class="mb-1">TREND AND FASHION</p>
              <p class="fs12 text-light-emphasis">Website design</p>
              <img src="./img/plus.png" alt="">
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 wow animate__rotateInUpRight" data-wow-offset="400">
          <div class="hover1 position-relative cursorPointer">
            <img src="./img/trendan.png" alt="" class="w-100">
            <div class="w-100 h-100 position-absolute top-0 text-light d-none">
              <p class="mb-1">TREND AND FASHION</p>
              <p class="fs12 text-light-emphasis">Website design</p>
              <img src="./img/plus.png" alt="">
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 wow animate__rotateInUpLeft" data-wow-offset="400">
          <div class="hover1 position-relative cursorPointer">
            <img src="./img/trendan.png" alt="" class="w-100">
            <div class="w-100 h-100 position-absolute top-0 text-light d-none">
              <p class="mb-1">TREND AND FASHION</p>
              <p class="fs12 text-light-emphasis">Website design</p>
              <img src="./img/plus.png" alt="">
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 wow animate__rotateInDownRight" data-wow-offset="400">
          <div class="hover1 position-relative cursorPointer">
            <img src="./img/trendan.png" alt="" class="w-100">
            <div class="w-100 h-100 position-absolute top-0 text-light d-none">
              <p class="mb-1">TREND AND FASHION</p>
              <p class="fs12 text-light-emphasis">Website design</p>
              <img src="./img/plus.png" alt="">
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 wow animate__rotateInUpRight" data-wow-offset="400">
          <div class="hover1 position-relative cursorPointer">
            <img src="./img/limited.png" alt="" class="w-100">
            <div class="w-100 h-100 position-absolute top-0 text-light d-none">
              <p class="mb-1">TREND AND FASHION</p>
              <p class="fs12 text-light-emphasis">Website design</p>
              <img src="./img/plus.png" alt="">
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-6 col-lg-3">
          <div class="hover1 position-relative cursorPointer wow animate__rotateInDownLeft" data-wow-offset="400">
            <img src="./img/limited.png" alt="" class="w-100">
            <div class="w-100 h-100 position-absolute top-0 text-light d-none">
              <p class="mb-1">TREND AND FASHION</p>
              <p class="fs12 text-light-emphasis">Website design</p>
              <img src="./img/plus.png" alt="">
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 wow animate__rotateInDownRight" data-wow-offset="400">
          <div class="hover1 position-relative cursorPointer">
            <img src="./img/limited.png" alt="" class="w-100">
            <div class="w-100 h-100 position-absolute top-0 text-light d-none">
              <p class="mb-1">TREND AND FASHION</p>
              <p class="fs12 text-light-emphasis">Website design</p>
              <img src="./img/plus.png" alt="">
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 wow animate__rotateInUpLeft" data-wow-offset="400">
          <div class="hover1 position-relative cursorPointer">
            <img src="./img/limited.png" alt="" class="w-100">
            <div class="w-100 h-100 position-absolute top-0 text-light d-none">
              <p class="mb-1">TREND AND FASHION</p>
              <p class="fs12 text-light-emphasis">Website design</p>
              <img src="./img/plus.png" alt="">
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 wow animate__rotateInUpLeft" data-wow-offset="400">
          <div class="hover1 position-relative cursorPointer">
            <img src="./img/item.png" alt="" class="w-100">
            <div class="w-100 h-100 position-absolute top-0 text-light d-none">
              <p class="mb-1">TREND AND FASHION</p>
              <p class="fs12 text-light-emphasis">Website design</p>
              <img src="./img/plus.png" alt="">
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 wow animate__rotateInDownRight" data-wow-offset="400">
          <div class="hover1 position-relative cursorPointer">
            <img src="./img/item.png" alt="" class="w-100">
            <div class="w-100 h-100 position-absolute top-0 text-light d-none">
              <p class="mb-1">TREND AND FASHION</p>
              <p class="fs12 text-light-emphasis">Website design</p>
              <img src="./img/plus.png" alt="">
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 wow animate__rotateInDownLeft" data-wow-offset="400">
          <div class="hover1 position-relative cursorPointer">
            <img src="./img/item.png" alt="" class="w-100">
            <div class="w-100 h-100 position-absolute top-0 text-light d-none">
              <p class="mb-1">TREND AND FASHION</p>
              <p class="fs12 text-light-emphasis">Website design</p>
              <img src="./img/plus.png" alt="">
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 wow animate__rotateInUpRight" data-wow-offset="400">
          <div class="hover1 position-relative cursorPointer">
            <img src="./img/item.png" alt="" class="w-100">
            <div class="w-100 h-100 position-absolute top-0 text-light d-none">
              <p class="mb-1">TREND AND FASHION</p>
              <p class="fs12 text-light-emphasis">Website design</p>
              <img src="./img/plus.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="testimonials" class="w-100 py-5 bg-dark text-light text-center">
    <div class="container">
      <p class="fs-3 fw-light mb-1"><span class="fw-bold">OUR CLIENTS'</span> TESTIMONIALS</p>
      <div class="row justify-content-center">
        <div class="col-4 col-sm-3 col-md-2 col-lg-1">
          <div class="underline"></div>
        </div>
      </div>
      <div class="row justify-content-center mt-2 mb-4 mb-md-5">
        <div class="col-8">
          <div class="row justify-content-center">
            <div class="col-4 col-sm-3 col-md-2 col-lg-1">
              <div class="underline2"></div>
            </div>
          </div>
        </div>
      </div>
      <p class="fs14">This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
      <p class="fs14">Dean Martin, <span class="text-light-emphasis">CEO Acme Inc.</span></p>
      <div class="d-flex pt-5 justify-content-center">
        <img src="./img/carouselbtn.png" alt="" class="mx-1">
        <img src="./img/carouselbtn2.png" alt="" class="mx-1">
        <img src="./img/carouselbtn2.png" alt="" class="mx-1">
      </div>
    </div>
  </div>
  <div id="contactUs" class="w-100 py-5 text-dark text-center">
    <div class="container">
      <p class="fs-3 fw-light mb-1">FEEL FREE TO <span class="fw-bold">CONTACT US</span></p>
      <div class="row justify-content-center">
        <div class="col-4 col-sm-3 col-md-2 col-lg-1">
          <div class="underline"></div>
        </div>
      </div>
      <div class="row justify-content-center mt-2 mb-4 mb-md-5">
        <div class="col-8">
          <div class="row justify-content-center">
            <div class="col-4 col-sm-3 col-md-2 col-lg-1">
              <div class="underline2"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-2 d-none d-md-block col-xl-3"></div>
        <div class="col-12 fs14 col-md-8 col-xl-6">
          <div class="row">
            <div class="col-12">
              <P>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.</P>
            </div>
          </div>
          <div class="row g-4">
            <div class="col-12 col-sm-6">
              <p class="text-start">Name<span class="text-danger">*</span></p>
              <input type="text" name="" id="" placeholder="Name" class="w-100">
            </div>
            <div class="col-12 col-sm-6">
              <p class="text-start">Email address<span class="text-danger">*</span></p>
              <input type="email" name="" id="" placeholder="Email address" class="w-100">
            </div>
            <div class="col-12">
              <p class="text-start">Message<span class="text-danger">*</span></p>
              <textarea name="" id="" cols="" rows="5" class="w-100"></textarea>
            </div>
            <div class="col-12">
              <div class="row justify-content-end">
                <div class="col-3">
                  <button class="w-100 border-0 py-1 text-light fs12" id="send">SEND</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-2 d-none d-md-block col-xl-3"></div>
      </div>
    </div>
  </div>
  <footer class="w-100 py-3 bg-dark text-light-emphasis text-center">
    <div class="container">
      <div class="row justify-content-between">
        <div class="col-12 col-sm-6">
          <p class="fs12 mb-1">ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span class="text-light">SPIRIT8</span></p>
        </div>
        <div class="col-12 col-sm-5">
          <div id="logos" class="d-flex justify-content-between mx-auto">
            <div><img src="./img/facebook.png" alt="" class="w-100"></div>
            <div><img src="./img/twitter.png" alt="" class="w-100"></div>
            <div><img src="./img/google.png" alt="" class="w-100"></div>
            <div><img src="./img/linkedin.png" alt="" class="w-100"></div>
            <div><img src="./img/dribbble.png" alt="" class="w-100"></div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</body>
</html>